<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="240" name="MobileOptimized">
    <meta content="YES" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="max-age=3600" http-equiv="Cache-Control">
    <meta content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <title>slides</title>
<style>
    *{margin: 0;padding: 0;border: 0;}
    ::-webkit-scrollbar{display: none;}
    html{touch-action:none;} /*IE 禁止touch事件*/
    html,body{margin: 0;padding: 0;overflow: hidden;height: 100%;}
    #container{height: 100%;width: 100%;position: relative;margin: 0 auto; max-width: 640px;}
    #container > section,#container .cover{position: absolute;padding: 0;top: 0;height: 100%;width: 100%;overflow-y: scroll; transition: all .3s ease-in 0s;-webkit-transition: all .3s ease-in 0s;}
    #container .cover{background-color: #f60;z-index: 4;right: 0;transition: transform .5s linear 0s;-webkit-transition: -webkit-transform .5s linear 0s;}
</style>
</head>
<body>

<style>
    .center{
        text-align: center;
        font: normal 2rem/1.5 "Microsoft Yahei";
    }
    #logo{
        font: bold 3rem/1.2 "Arial";
        position: absolute;
        top: 0;
        z-index: 1;
    }
    .run{
        position: absolute;
        top: 0;
    }
    .logo2{
        right: 0;
    }
    section{
        background: #f66;
    }
    section:nth-child(2n){
        background: #bb0;
    }
</style>
    
    <div id="container">
        <div class="cover" id="cover">
            
        </div>
        <section>
            <div id="logo" class="run">LOGO</div>
            <ul class="run">
                <li>选项1</li>
                <li>选项2</li>
                <li>选项3</li>
                <li>选项4</li>
                <li>选项5</li>
                <li>选项6</li>
                <li>选项7</li>
                <li>选项8</li>
                <li>选项9</li>
                <li>选项10</li>
                <li>选项11</li>
                <li>选项12</li>
                <li>选项13</li>
                <li>选项14</li>
                <li>选项15</li>
                <li><a href="http://www.baidu.com" target="_blank" class="outstanding">点击打开百度</a></li>
                <li>选项17</li>
                <li>选项18</li>
                <li>选项19</li>
                <li>选项20</li>
                <li>选项21</li>
                <li>选项22</li>
                <li>选项23</li>
                <li>选项24</li>
                <li>选项25</li>
                <li>选项26</li>
                <li>选项27</li>
                <li>选项28</li>
                <li>选项29</li>
                <li>选项30</li>
                <li>选项31</li>
                <li>选项32</li>
                <li>选项33</li>
                <li>选项34</li>
                <li>选项35</li>
                <li>选项36</li>
                <li>选项37</li>
                <li>选项38</li>
                <li>选项39</li>
                <li>选项40</li>
                <li>选项41</li>
                <li>选项42</li>
                <li>选项43</li>
                <li>选项44</li>
                <li>选项45</li>
                <li>选项46</li>
                <li>选项47</li>
                <li>选项48</li>
                <li>选项49</li>
                <li>选项50</li>
                <li>选项51</li>
                <li>选项52</li>
                <li>选项53</li>
                <li>选项54</li>
                <li>选项55</li>
                <li>选项56</li>
                <li>选项57</li>
                <li>选项58</li>
                <li>选项59</li>
                <li>选项60</li>
                <li>选项61</li>
                <li>选项62</li>
                <li>选项63</li>
                <li>选项64</li>
                <li>选项65</li>
                <li>选项66</li>
                <li>选项67</li>
                <li>选项68</li>
                <li>选项69</li>
                <li>选项70</li>
                <li>选项71</li>
                <li>选项72</li>
                <li>选项73</li>
                <li>选项74</li>
                <li>选项75</li>
                <li>选项76</li>
                <li>选项77</li>
                <li>选项78</li>
                <li>选项79</li>
                <li>选项80</li>
                <li>选项81</li>
                <li>选项82</li>
                <li>选项83</li>
                <li>选项84</li>
                <li>选项85</li>
                <li>选项86</li>
                <li>选项87</li>
                <li>选项88</li>
                <li>选项89</li>
                <li>选项90</li>
                <li>选项91</li>
                <li>选项92</li>
                <li>选项93</li>
                <li>选项94</li>
                <li>选项95</li>
                <li>选项96</li>
                <li>选项97</li>
                <li>选项98</li>
                <li>选项99</li>
                <li>选项100</li>
            </ul>
            <h2 class="run logo2">LOGO2</h2>
        </section>
        <section class="center">
            <a href="javascript:void(0);" onclick="transform_set(5);" class="outstanding">点击跳转到第5页面</a>
            <br>
            <br>
            <a href="http://www.baidu.com" target="_blank" class="outstanding">点击打开百度</a>
        </section>
        <section class="with-cover">第2屏</section>
        <section >第3屏</section>
        <section >第4屏</section>
        <section data-prev="-4" data-bg="blue">第5屏</section>
        <section data-next="-5">第6屏</section>
    </div>
    <script>
        conf = {
            all_images : [
                
            ], //根据每组数据的src属性进行加载判断
            ready: function(){
                var W = document.documentElement.clientWidth;
                document.getElementById("cover").style.cssText = 
                    "-webkit-transform: translate3d("+W+"px, 0, 0); "
                    +"transform: translate3d("+W+"px, 0, 0);";
            }
        };
        document.getElementById('logo').run = function(per, dir){
            var W = document.documentElement.clientWidth;
            this.style.cssText = 
                "-webkit-transform: translate3d("+( (140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0); "
                +"transform: translate3d("+((140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0);";
        };

        [].forEach.call(document.querySelectorAll('.logo2'),function(l){
            l.set = function(set,w,h,W,H){
                set.begin({x:0,y:0,rotate: 0, scale:1}).then({
                    per: .3,
                    x: w-W,
                    y: 300,
                    rotate: 180,
                    scale: .5
                }).then({
                    per: .5,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 360,
                    scale: 1
                }).then({
                    per: .7,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 240,
                    scale: 1.5
                }).then({
                    per: .8,
                    x: -100,
                    y: 200,
                    opacity:.2,
                    rotate: 120,
                    scale: 1
                }).end({x:w-W,y:H-h,rotate:0, scale:1});
            };
        });
    </script>
    <script src="js/slide.js"></script>
</body>
</html>